@import 'colors/che-colors.styl'

che-separator()
  position absolute
  top 0
  height 24px
  margin-top 12px
  border-left solid 1px $label-primary-color
  content ""

che-roundimage()
  border-radius 50%

che-developers-face()
  box-shadow-simple()
  border-radius 1px
  height 14px
  width 14px
  padding 0

@import '../../bower_components/bootstrap-stylus/bootstrap/index'
@import '../components/widget'
@import '../components/codemirror/codemirror'
@import 'projects/projects-config'

$che-logs-output-font = "Droid Sans Mono", monospace

.browsehappy
  margin 0.2em 0
  background #ccc
  color #000
  padding 0.2em 0

.thumbnail
  height 200px

.dark-menu-bg
  background-color $menu-bg-color

md-sidenav.dark-menu-bg
  overflow hidden

  img.pull-right
    width 50px

md-sidenav
  box-shadow none !important
  width 200px
  min-width 200px

md-sidenav > *
  width 200px
  min-width 200px

html

body
  font-size 13px
  font-family 'Open Sans'
  background-color $background-site-color
  min-width 600px

button,
select,
html,
textarea,
input
  font-family 'Open Sans'

label
 margin-bottom 0

.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, .h5 small, h6 small, h6 .small
  font-size 65%
  color #777

label
  font-weight normal !important

md-divider
  border-top-color #353E5D !important
  margin 0 10px

md-toolbar
  font-size 1em
  flex 1

md-option
  padding 5px
  height auto

md-option:hover
  background-color $hover-on-list-color

.md-open-menu-container
  transition none !important

  md-menu-item
    transition none !important

.main-page
  min-width 320px


.main-page-loader
  position absolute
  top 0
  bottom 0
  left 0
  right 0
  margin auto
  color white
  background-color black
  z-index 80

.main-page-loader-content
  display inline-block
  position fixed
  top 0
  bottom 0
  left 0
  right 0
  width 120px
  height 120px
  margin auto
  z-index: 86;


.not-visible
  visibility hidden
// injector
// endinjector



.che-logo
  width 137px
  margin-top 10px
  margin-bottom 20px

.che-hover:hover
  che-brightness(80%)

.animate-show.ng-hide-add
  opacity 0

.animate-show.ng-hide
  transition 0.5s linear all

.ng-cloak
  display none !important

.image-loader-fadein.ng-enter
  opacity 0
  animation popInEffect 0.5s

.image-loader-fadein.ng-enter-active
  opacity 1

@keyframes popInEffect
  0% { opacity: 0}
  100% { opacity: 1}


/*
.ide-show.ng-hide-remove
  transition 0.5s linear all
  opacity 1

.ide-show.ng-hide-add
  opacity 0
  transition 0.5s linear all
*/

::-webkit-scrollbar
  width 10px

::-webkit-scrollbar-track
  border-radius 5px
  background rgba(0,0,0,0.1)


::-webkit-scrollbar-thumb
  border-radius 5px
  background rgba(0,0,0,0.2)


::-webkit-scrollbar-thumb:hover
  background rgba(0,0,0,0.4)

::-webkit-scrollbar-thumb:window-inactive
  background rgba(0,0,0,0.05)


.spinner
  width 120px
  height 110px
  text-align center
  font-size 10px

.spinner > div
  background-color $che-medium-blue-color
  height 100%
  width 8px
  border-radius 6px
  margin-right 6px
  display inline-block
  animation sk-stretchdelay 1.2s infinite ease-in-out

.spinner .rect2
  animation-delay -1.1s


.spinner .rect3
  animation-delay -1.0s


@-webkit-keyframes sk-stretchdelay
  0%, 40%, 100%
    -webkit-transform scaleY(0.4)
  20%
    -webkit-transform scaleY(1.0)


@keyframes sk-stretchdelay
  0%, 40%, 100%
    transform scaleY(0.4)
    -webkit-transform scaleY(0.4)
  20%
    transform scaleY(1.0)
    -webkit-transform scaleY(1.0)

.logo-color-white .outer-fill
  fill $che-white-color

.noselect
  user-select none
